<template>
  <div class="probe-detail">
    <div class="data-case">
      <div class="arrow-btn arrow-left">
        <Icon type="ios-arrow-back" size="24" :color="dateList.length < 10 ? '#678DE1' : '#fff'" @click="dateSlideLeft"></Icon>
      </div>
      <div class="slider-box">
        <ul id="dateSlider">
          <li v-for="(item, index) in dateList" :key="index" :class="{ 'is-checked': index === currentDate }" @click="handleCheckDate(item, index)">{{ item }}</li>
        </ul>
      </div>
      <div class="arrow-btn arrow-right">
        <Icon type="ios-arrow-forward" size="24" :color="dateList.length < 10 ? '#678DE1' : '#fff'" @click="dateSlideRight"></Icon>
      </div>
    </div>
    <div id="lineChart"></div>
  </div>
</template>

<script>
  export default {
    props: ['rest'],
    data () {
      return {
        currentDate: '',
        dateList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
      }
    },
    mounted () {
      this.initChart()
    },
    watch: {},
    methods: {
      dateSlideLeft () {
        if (this.dateList.length < 9) {
          return
        }
        let dom = document.getElementById('dateSlider')
        let obj = getComputedStyle(dom, null)
        if (obj['left'] === '0px') {
          this.return
        } else {
          let currentLeft = Number(obj['left'].split('px')[0])
          document.getElementById('dateSlider').style.left = `${currentLeft + 48}px`
        }
      },
      dateSlideRight () {
        if (this.dateList.length < 9) {
          return
        }
        let dom = document.getElementById('dateSlider')
        let obj = getComputedStyle(dom, null)
        let maxNumber = (this.dateList.length - 9) * 48
        if (obj['left'] == `${-maxNumber}px`) {
          return
        } else {
          let currentRight = Number(obj['left'].split('px')[0])
          document.getElementById('dateSlider').style.left = `${currentRight - 48}px`
        }
      },
      handleCheckDate (item, index) {
        this.currentDate = index
      },
      initChart () {
        let option = {
          grid: {
            left: '2%',
            right: '2%',
            bottom: '5%',
            top: '5%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#ddd'
              }
            },
            backgroundColor: 'rgba(255,255,255,1)',
            padding: [5, 10],
            textStyle: {
              color: '#7588E4'
            },
            extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
          },
          xAxis: {
            type: 'category',
            data: this.rest.timeRange,
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#678DE1'
              }
            }
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#678DE1'
              }
            },
            axisLabel: {
              textStyle: {
                fontSize: 14,
                color: '#fff'
              }
            }
          },
          series: [
            {
              name: '销量预警',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 0,
              data: this.rest.leakPointItems,
              areaStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: 'rgba(249, 239, 71, 1)'
                      },
                      {
                        offset: 0.8,
                        color: 'rgba(249, 239, 71, 0.1)'
                      }
                    ],
                    false
                  ),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: '#f7b851'
                }
              }
            }
          ]
        }
        let charts
        if (document.getElementById('lineChart')) {
          charts = this.$echarts.init(document.getElementById('lineChart'))
          charts.clear(option)
          charts.setOption(option)
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .probe-detail {
    width: 100%;
    height: 100%;
  }
  .data-case {
    width: 100%;
    height: 45px;
    border: 1px solid #678de1;
    display: flex;
    .arrow-btn {
      cursor: pointer;
      width: 27px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .arrow-left {
      border-right: 1px solid #678de1;
    }
    .arrow-right {
      border-left: 1px solid #678de1;
    }
    .slider-box {
      width: calc(100% - 54px);
      height: 100%;
      position: relative;
      overflow: hidden;
      #dateSlider {
        width: auto;
        display: flex;
        position: absolute;
        overflow-y: auto;
        height: 100%;
        top: 0;
        left: 0;
        li {
          cursor: pointer;
          color: #7fdff7;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
          width: 49px;
        }
        .is-checked {
          color: #fff;
          background: url('~@/assets/images/viewIcon/icon_tc_jctt_jiantou_up.png') no-repeat;
          background-position: 15px 30px;
        }
      }
    }
  }
  #lineChart {
    margin-top: 20px;
    width: 100%;
    height: calc(100% - 65px);
  }
</style>
